<template>
    <div>
        <div>
            <el-button type="primary" size="medium" @click="addCoin">+ 添加</el-button>
        </div>
        <el-table
                :data="addressManageListData"
                style="width: 100%">
            <el-table-column
                    prop="coin"
                    label="币种"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.isSet">
                            <el-input size="mini" placeholder="请输入内容" v-model="selectRow.coin"/>
                    </span>
                    <span v-else>
                        {{scope.row.coin}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="accuracy"
                    label="精度"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.isSet">
                         <el-input-number size="mini" placeholder="请输入内容" v-model="selectRow.accuracy"/>
                    </span>
                    <span v-else>{{scope.row.accuracy}}</span>
                </template>
            </el-table-column>
            <!--<el-table-column-->
                    <!--prop="address"-->
                    <!--label="收币地址">-->
                <!--<template slot-scope="scope">-->
                    <!--<span v-if="scope.row.isSet">-->
                         <!--<el-input size="mini" placeholder="请输入内容" v-model="selectRow.address"/>-->
                    <!--</span>-->
                    <!--<span v-else>{{scope.row.address}}</span>-->
                <!--</template>-->
            <!--</el-table-column>-->

            <!--<el-table-column-->
                    <!--prop="img"-->
                    <!--label="二维码">-->
                <!--<template slot-scope="scope">-->
                    <!--<span v-if="scope.row.isSet">-->
<!--&lt;!&ndash;                        <el-input size="mini" placeholder="请输入内容" v-model="selectRow.img"/>&ndash;&gt;-->
                        <!--<el-upload-->
                                <!--class="qrcode-uploader"-->
                                <!--:action="actions"-->
                                <!--:headers="headers"-->
                                <!--:data="{type:5}"-->
                                <!--accept="image/png,image/jpeg,image/jpg"-->
                                <!--:show-file-list="false"-->
                                <!--:on-success="handleAvatarSuccess"-->
                                <!--:before-upload="beforeAvatarUpload"-->
                                <!--:on-error="errorAvatarUpload"-->
                        <!--&gt;-->
                            <!--<img v-if="selectRow.img" :src="imgUrl+selectRow.img" class="qrcode-uploader-avatar">-->
                            <!--<i v-else class="el-icon-plus qrcode-uploader-icon"></i>-->
                        <!--</el-upload>-->
                    <!--</span>-->
                    <!--<span v-else><img :src="imgUrl+scope.row.img" alt="" class="qrcode-uploader-avatar"></span>-->
                <!--</template>-->
            <!--</el-table-column>-->

            <el-table-column
                    label="操作"
                    width="220"
            >
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="requestCoinChange(scope.row,scope.$index,true)">
                        {{scope.row.isSet?'保存':"编辑"}}
                    </el-button>
                    <template v-if="!scope.row.isSet">
                        <el-button type="danger" size="mini" @click="requestCoinDelete(scope.row,scope.$index)">
                            删除
                        </el-button>
                    </template>
                    <template v-else>
                        <el-button type="danger" size="mini"
                                   @click="requestCoinChange(scope.row,scope.$index,false)">取消
                        </el-button>
                    </template>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="total, sizes, prev, pager, next"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                :page-sizes="[10, 50, 100]"
                @size-change="handleSizeChange"
                @current-change="currentChange"
                @prev-click="requestGetCoinList(pagination.prePage)"
                @next-click="requestGetCoinList(pagination.nextPage)"
        >
        </el-pagination>
    </div>
</template>

<script>

    let api = '/manager/coin_config';
    import axios from 'axios'

    export default {
        name: "AddressManage",
        data() {
            return {
                selectRow: null,//选中行
                addressManageListData: [],
                pagination: {
                    total: 0,
                    pageSize: 10,
                    prePage: 0,
                    pageNum: 1,
                    nextPage: 0,
                },
                actions: axios.defaults.baseURL + '/api/upload_img.do',
                headers: {sid: localStorage.getItem('sid')},
                imgUrl: axios.defaults.baseImgURL
            }
        },
        mounted() {
            this.requestGetCoinList(this.pagination.pageNum);
        },
        methods: {
            requestGetCoinList(page) {
                this.requestAxios.requestCMS('post', api + '/get_list.do', {
                    page: page,
                    size: this.pagination.pageSize,
                }, (response) => {
                    // console.log('response =-=-=-=', response);
                    let data = response.data.list;
                    let arr = [];
                    for (var i = 0; i < data.length; i++) {
                        data[i].isSet = false;
                        arr.push(data[i])
                    }
                    this.addressManageListData = arr;
                    this.pagination.total = response.data.total;
                    this.pagination.prePage = response.data.prePage;
                    this.pagination.pageNum = response.data.pageNum;
                    this.pagination.nextPage = response.data.nextPage;
                });
            },
            //添加账号
            addCoin() {
                for (let i of this.addressManageListData) {
                    if (i.isSet) return this.$message.warning("请先保存当前编辑项");
                }
                let initSelectRow = {
                    coin: "",
                    accuracy: "",
                    address: "",
                    img: "",
                    isSet: true,
                };
                this.addressManageListData.unshift(initSelectRow);
                this.selectRow = initSelectRow;
                // console.log('s = ', this.selectRow)
            },
            // 删除
            requestCoinDelete(row, index) {
                this.$confirm('此操作将永久删除该选项, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.requestAxios.requestCMS('post', api + '/delete.do', {id: row.id}, (response) => {
                        this.$message({
                            type: 'success',
                            message: "删除成功!"
                        });
                        this.addressManageListData.splice(index, 1);
                        this.requestGetCoinList(this.pagination.pageNum);
                    });
                }).catch(() => {
                    this.$message.info("取消删除");
                });

            },
            //修改
            requestCoinChange(row, index, cg) {
                //点击修改 判断是否已经保存所有操作
                for (let i of this.addressManageListData) {
                    if (i.isSet && i.id != row.id) {
                        this.$message.warning("请先保存当前编辑项");
                        return false;
                    }
                }
                //是否是取消操作
                if (!cg) {
                    if (!this.selectRow.id) {
                        this.addressManageListData.splice(index, 1);
                    } else {
                        row.isSet = !row.isSet;
                        this.requestGetCoinList(this.pagination.pageNum);
                    }
                    return false;
                }
                //提交数据
                if (row.isSet) {
                    if (row.id) {
                        this.updateCoin()
                    } else {
                        this.requestAddCoin()
                    }
                } else {
                    this.selectRow = row;
                    row.isSet = true;
                }
            },
            // 更新
            updateCoin() {
                this.requestAxios.requestCMS('post', api + '/edit.do', this.selectRow, (response) => {
                    this.$message({
                        type: 'success',
                        message: "保存成功!"
                    });
                    this.isSet = false;
                    this.requestGetCoinList(this.pagination.pageNum);
                });
            },
            // 添加
            requestAddCoin() {
                this.requestAxios.requestCMS('post', api + '/add.do', this.selectRow, (response) => {
                    this.$message({
                        type: 'success',
                        message: "添加成功!"
                    });
                    this.isSet = false;
                    this.requestGetCoinList(this.pagination.pageNum);
                });
            },

            handleAvatarSuccess(res, file) {
                // this.selectRow.img = URL.createObjectURL(file.raw);
                this.selectRow.img = res.data;
            },

            errorAvatarUpload(err, file, fileList) {
                this.$message.error({message: err, duration: 3000});
            },

            beforeAvatarUpload(file) {
                let isJPG = file.type === 'image/jpeg' || 'image/png' || 'image/jpg';
                let isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                    return false;
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                    return false;
                }
            },

            handleSizeChange(val) {
                this.pagination.pageSize = val;
                this.requestGetCoinList(this.pagination.pageNum)
            },
            currentChange(page) {
                this.requestGetCoinList(page)
            }

        }
    }
</script>

<style scoped>
    .qrcode-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .qrcode-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .qrcode-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }

    .qrcode-uploader-avatar {
        width: 120px;
        height: 120px;
        display: block;
    }
</style>
